<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<c:url value="/statements" var="statementsURL"/>
<c:url value="/actor" var="actorURL"/>
<c:url value="/verb" var="verbURL"/>

<button id="buscar" onclick="buscar();">Buscar Statements</button>

<div style="margin-top: 1%">

	<table id="jqGrid"></table>
	<div id="jqGridPager"></div>
</div>

<script>
function getAgentsList()
{
	var options = "";
	$.ajax({
        url:"${actorURL}/getAgents",
        success: function(data)
        {	
			for(i = 0; i < data.length; i++)
			{
				options += data[i].id + ":" + data[i].name;
				if(i < data.length - 1)
				options += ";";
			}
        },
        async:false,
        datatype: "json"
   });    
   
   return options;
}

function getVerbsList()
{
	var options = "";
	$.ajax({
        url:"${verbURL}/getAll",
        success: function(data)
        {	
			for(var i = 0; i < data.length; i++)
			{
				options += data[i].id + ":" + data[i].name;
				if(i < data.length - 1)
				options += ";";
			}
        },
        async:false,
        datatype: "json"
   });    
   
   return options;
}

function serializarStatement(data)
{
	var json = {actor:{id: data["actor.id"], objectType: "AGENT"}, verb:{id: data["verb.id"]},object:{id: generateUUID(), name: data["object.name"], description: data["object.description"], objectType:"ACTIVITY"}, objectType :"STATEMENT"};
	return JSON.stringify(json);
}

function realizarBusqueda(campo, filtro)
{
	var postData = null;
	
	if(campo == "ACTOR")
		postData = {agent : "{\"name\": \"" + filtro + "\", \"objectType\": \"AGENT\"}"};
	
	$("#jqGrid").jqGrid("setGridParam", {postData: postData});
	$("#jqGrid").trigger("reloadGrid");
}

function buscar()
{
	var div = $("<div title='Buscar'><div style='width:100%'><select id='selectCampo' style='width:100%'><option value='ACTOR'>ACTOR</option></select></div><div style='width:100%;margin-top:20px'><input type='text' id='filtro' style='width:100%'/></div></div>");
	dialog = $(div).dialog({
	      height: 300,
	      width: 350,
	      modal: true,
	      buttons: {
	        Cancel: function() {
	          dialog.dialog( "close" );
	        },
	        Buscar: function() {
		        realizarBusqueda($(div).find("#selectCampo").val(), $(div).find("#filtro").val());
	        	dialog.dialog( "close" );
		     },
	        Limpiar: function() {
		        realizarBusqueda("","");
	        	dialog.dialog( "close" );
		     }
	      }
	    });
}

$(document).ready(function()
{
	$("#buscar" ).button({icons: {secondary: "ui-icon-search"}});
	
	var createOptions = {closeAfterEdit: true, mtype: "POST", ajaxEditOptions:{contentType: "application/json;"}, url:"${statementsURL}", serializeEditData:function(data){return serializarStatement(data);}};
	
	$("#jqGrid").jqGrid({
        url: "${statementsURL}",
        mtype: "GET",
        datatype: "json",
        colModel: [
            { label: 'Actor', name: 'actor.name', width:2},
            { label: 'Verb', name: 'verb.name', width: 1},
            { label: 'Object', name: 'object.labelFormat', width: 2},
            { label: 'Agent', name: 'actor.id', hidden:true, editable:true, edittype:"select", editrules: {edithidden:true}, editoptions: {value: getAgentsList}},
            { label: 'Verb', name: 'verb.id', hidden:true, editable:true, edittype:"select", editrules: {edithidden:true}, editoptions: {value: getVerbsList}},
            { label: 'Name', name: 'object.name', hidden:true, editable:true, editrules: {edithidden:true}},
            { label: 'Description', name: 'object.description', editable:true, editrules: {edithidden:true}, width: 3}
        ],
		viewrecords: true,
		width: $(window).width() * 0.97,
        height: $(window).height() * 0.6,
        caption: "Statements",
        hidegrid: false,
        cmTemplate:{sortable:false, resizable: false},
        pager: "#jqGridPager",
        rowNum: -1
    });
	
	$("#jqGrid").navGrid("#jqGridPager",{edit: false, add: true, del: false, search: false, refresh: false, view: false, position: "left"},{}, createOptions);
});
</script>

